<template>
	<div class="reply-setting">
		<div class="title">自动回复设置</div>
		<el-form label-position="top" :model="settingForm">
			<el-row>
				<el-col :span="12">
					<el-form-item class="input">
						<span slot="label"
							>UP csrf
							<el-tooltip
								class="item"
								effect="dark"
								content="不知道如何获取？请移步到基础设置扫码获取！机器人同理"
								placement="top"
							>
								<i class="el-icon-info"></i> </el-tooltip
						></span>
						<el-input
							v-model="settingForm.UPcsrf"
							placeholder="UP主的csrf"
							show-password
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="UP Cookie" class="input">
						<el-input
							v-model="settingForm.UPCookie"
							placeholder="UP主的Cookie"
							show-password
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input">
						<span slot="label"
							>忽略UP自身发言
							<el-tooltip
								class="item"
								effect="dark"
								content="开启之后不会对UP发的弹幕进行自动回复，机器人同理！"
								placement="top"
							>
								<i class="el-icon-info"></i>
							</el-tooltip>
						</span>
						<el-switch
							v-model="settingForm.ignoreUpReply"
							active-text="开启"
							inactive-text="关闭"
							@change="ignoreUpReplyChange"
						>
						</el-switch>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form :inline="true" :model="settingForm" style="height: 42px">
				<el-form-item label="开启机器人：">
					<el-switch
						v-model="settingForm.openRobot"
						active-text="开启"
						inactive-text="关闭"
						@change="openRobotChange"
					>
					</el-switch>
				</el-form-item>
			</el-form>
			<el-row v-show="settingForm.openRobot" class="robotFrom">
				<el-col :span="12">
					<el-form-item class="input">
						<span slot="label"
							>机器人 uid
							<el-popover
								placement="bottom"
								title="扫码获取uid"
								width="150"
								trigger="hover"
							>
								<img :src="QRCodeURL" width="100%" />
								<div
									class="loginStatus"
									:class="{ confirm }"
								></div>
								<div class="loginStatus" :class="{ notScan }">
									<el-button
										type="primary"
										@click="getLoginUrl"
										>换一张</el-button
									>
								</div>
								<div class="loginStatus" :class="{ success }">
									<el-result icon="success" title="获取成功">
									</el-result>
								</div>
								<i
									slot="reference"
									class="iconfont icon-erweima1"
								></i>
							</el-popover>
						</span>
						<el-input
							v-model="settingForm.robotId"
							placeholder="机器人的uid"
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="忽略机器人自身发言" class="input">
						<el-switch
							v-model="settingForm.ignoreRobotReply"
							active-text="开启"
							inactive-text="关闭"
							@change="ignoreRobotReplyChange"
						>
						</el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="机器人 csrf" class="input">
						<el-input
							v-model="settingForm.robotcsrf"
							placeholder="机器人的csrf"
							show-password
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="机器人 Cookie" class="input">
						<el-input
							v-model="settingForm.robotCookie"
							placeholder="机器人的Cookie"
							show-password
						>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item class="btn">
				<el-button type="primary" @click="saveInfo">
					保存
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import QRCode from "qrcode";
import qs from "qs";
export default {
	data() {
		return {
			settingForm: {
				// 机器人的uid
				robotId: localStorage.getItem("robotId"),
				UPcsrf: localStorage.getItem("UPcsrf"),
				robotcsrf: !!+localStorage.getItem("openRobot")
					? localStorage.getItem("robotcsrf")
					: "",
				UPCookie: localStorage.getItem("UPCookie"),
				robotCookie: !!+localStorage.getItem("openRobot")
					? localStorage.getItem("robotCookie")
					: "",
				// 是否开启机器人
				openRobot: !!+localStorage.getItem("openRobot") || false,
				// 是否屏蔽up自己的自动回复
				ignoreUpReply: localStorage.getItem("ignoreUpReply")
					? !!+localStorage.getItem("ignoreUpReply")
					: true,
				// 是否屏蔽机器人自己的自动回复
				ignoreRobotReply: localStorage.getItem("ignoreRobotReply")
					? !!+localStorage.getItem("ignoreRobotReply")
					: true,
			},
			// 二维码地址
			QRCodeURL: "",

			// 二维码的key
			oauthKey: "",

			// 是否扫码
			confirm: false,

			// 是否过期
			notScan: false,

			// 二维码时间
			ScanTime: 0,

			// 是否登录成功
			success: false,
		};
	},
	mounted() {
		this.$electron.remote.ipcMain.on("updateUpInfo", (e, params) => {
			const { csrf, cookie } = params;
			this.settingForm.UPcsrf = csrf;
			this.settingForm.UPCookie = cookie;
			this.saveInfo();
		});
		this.getLoginUrl();
	},
	methods: {
		// 保存信息
		saveInfo() {
			const {
				robotId,
				UPcsrf,
				robotcsrf,
				UPCookie,
				robotCookie,
				openRobot,
			} = this.settingForm;
			localStorage.setItem("UPcsrf", UPcsrf);
			localStorage.setItem("UPCookie", UPCookie);
			openRobot
				? (localStorage.setItem("robotId", robotId),
				  localStorage.setItem("robotcsrf", robotcsrf),
				  localStorage.setItem("robotCookie", robotCookie),
				  this.settingUname(robotId))
				: (localStorage.setItem("robotcsrf", UPcsrf),
				  localStorage.setItem("robotCookie", UPCookie));
		},

		// 开启机器人
		openRobotChange(val) {
			localStorage.setItem("openRobot", val ? "1" : "0");
		},

		// 是否屏蔽up自己的自动回复
		ignoreUpReplyChange(val) {
			localStorage.setItem("ignoreUpReply", val ? 1 : 0);
		},

		// 是否屏蔽机器人自己的自动回复
		ignoreRobotReplyChange(val) {
			localStorage.setItem("ignoreRobotReply", val ? 1 : 0);
		},

		// 设置机器人的uname
		settingUname(uid) {
			this.axios
				.get(
					`https://api.bilibili.com/x/space/acc/info?mid=${uid}&jsonp=jsonp`
				)
				.then((res) => {
					localStorage.setItem("robotUname", res.data.data.name);
				});
		},

		// 获取登录二维码地址
		getLoginUrl() {
			this.ScanTime = 0;
			this.notScan = false;
			this.axios
				.get("https://passport.bilibili.com/qrcode/getLoginUrl")
				.then((res) => {
					this.oauthKey = res.data.data.oauthKey;
					this.getLoginInfo();
					QRCode.toDataURL(res.data.data.url).then((QRCodeURL) => {
						this.QRCodeURL = QRCodeURL;
					});
				});
		},

		// 判断二维码有没有被扫
		getLoginInfo() {
			this.ScanTime++;
			this.axios
				.post(
					"https://passport.bilibili.com/qrcode/getLoginInfo",
					`oauthKey=${this.oauthKey}&gourl=https://www.bilibili.com/`
				)
				.then((res) => {
					if (this.ScanTime >= 57) {
						this.confirm = false;
						this.notScan = true;
					} else {
						if (res.data.data == -4) {
							setTimeout(() => {
								this.getLoginInfo();
							}, 3000);
						} else if (res.data.data == -5) {
							this.confirm = true;
							setTimeout(() => {
								this.getLoginInfo();
							}, 3000);
						} else {
							this.success = true;
							const query = qs.parse(
								res.data.data.url.split("?")[1]
							);
							const { DedeUserID, bili_jct, SESSDATA } = query;
							this.settingForm.robotId = DedeUserID;
							this.settingUname(DedeUserID);
							this.settingForm.robotcsrf = bili_jct;
							this.settingForm.robotCookie = `SESSDATA=${SESSDATA}`;
						}
					}
				});
		},
	},
};
</script>

<style lang="scss">
.reply-setting {
	.robotFrom {
		.el-col {
			height: 93px;
		}
		.loginStatus {
			display: none;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 150px;
			height: 150px;
		}
		.confirm {
			display: block;
			background: url("")
				rgba(255, 255, 255, 0.8) no-repeat;
			background-position: center;
		}
		.notScan {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.8);
		}
		.success {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			.el-result {
				.el-result__title {
					p {
						font-size: 16px;
					}
				}
			}
		}
	}
}
</style>
